<template>
  <el-submenu
    :show-timeout="0"
    :hide-timeout="0"
    :index="menuNode.idKey"
    :class="
      `sub-menu-${menuNode.level} ${openIds.indexOf(menuNode.idKey) != -1 ? 'is-selected' : ''} ${
        !menuNode.children || (menuNode.children && menuNode.children.length == 0) ? 'empty-children' : ''
      }`
    "
  >
    <div
      :data-url="menuNode.url"
      slot="title"
      :key="`${menuNode.idKey}`"
      class="sub-menu-title"
      @click.stop="menuSelect(menuNode)"
    >
      <!--:href="menuNode.url"-->
      <a
        target="_blank"
        :href="externalLinkUrl"
        v-if="externalLinks"
        class="sub-menu-link"
        :class="`sub-menu-link-${menuNode.level}`"
      >
        <div class="sub-menu-icon" v-if="menuNode.icon">
          <div
            :style="{ background: `url(${menuNode.icon})` }"
            alt=""
            style="width: 100%; height: 100%; background-size: 100% 100%"
          ></div>
        </div>
        {{ menuNode.title }}
      </a>
      <router-link v-else :to="menuNode.url" class="sub-menu-link" :class="`sub-menu-link-${menuNode.level}`">
        <div class="sub-menu-icon" v-if="menuNode.icon">
          <div
            :style="{ background: `url(${menuNode.icon})` }"
            alt=""
            style="width: 100%; height: 100%; background-size: 100% 100%"
          ></div>
        </div>
        {{ menuNode.title }}
      </router-link>
      <template v-if="menuNode.children && menuNode.children.length > 0">
        <i v-if="selectIds.indexOf(menuNode.idKey) !== -1" class="el-icon-caret-bottom"></i>
        <i v-else class="el-icon-caret-right"></i>
      </template>
    </div>
    <template v-if="menuNode.children && menuNode.children.length > 0">
      <el-menu-item
        :class="`sub-menu-${submenu.level} ${openIds.indexOf(submenu.idKey) != -1 ? 'is-selected' : ''}`"
        v-for="(submenu, index) in menuNode.children"
        :key="`submenu-${index}`"
        :index="submenu.idKey"
      >
        <sub-menu :menu-node="submenu" :open-ids="openIds" :select-ids="selectIds" :menu-select="menuSelect" />
      </el-menu-item>
    </template>
  </el-submenu>
</template>
<script>
import { getToken } from '@/token'
import qs from 'qs'

const short = require('short-uuid')
export default {
  name: 'SubMenu',
  props: {
    menuNode: {
      type: Object,
      default: () => {
        return {
          opened: false,
          isFirst: false,
          idKey: '',
          index: 0,
          level: 0,
          title: '',
          url: '',
          icon: null,
          children: []
        }
      }
    },
    openIds: {
      type: Array,
      default: () => {
        return []
      }
    },
    selectIds: {
      type: Array,
      default: () => {
        return []
      }
    },
    menuSelect: {
      type: Function,
      default: () => {}
    }
  },
  computed: {
    //是否是外链
    externalLinks() {
      return /^http/.test(this.menuNode?.url ?? '')
    },
    // 外部链接url
    externalLinkUrl() {
      // 获取token
      const token = getToken()
      // 解析url
      const url = new URL(this.menuNode?.url ?? '')
      // url参数解析
      const searchParams = qs.parse(url.search.substr(1))
      // 增加token参数
      const searchParamsStr = qs.parse({
        ...searchParams,
        token: token
      })
      url.search = qs.stringify(searchParamsStr)
      console.log(url.href)
      return url.href
    }
  }
}
</script>
<style scoped></style>
